<template>
  <van-list 
    class="detai-box" 
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    offset="0"
    @load="onLoad"
    >
    <div v-for="goods in goodslist" :key="goods.proid" @click="goGoodsDetail(goods.proid)">
        <img :src="goods.img1">
        <p class="title"> {{goods.proname}}</p>
        <p class="price"> {{goods.originprice}}</p>

    </div>
  </van-list>

  
</template>

<script>
import axios from "axios";
export default {
    name:"Detail",
    data(){
        return{
            pageIndex:1,
            loading:false,
            finished:false,
            goodslist:[]
        }
    },
    methods:{
      onLoad(){
        // console.log("onload");
        axios({
          url:"api/pro/list",
          params:{
            count:this.pageIndex,
            limitNum:10
          }
        })
        .then((res)=>{
          if(res.data.code==200){
            this.goodslist=[...this.goodslist,...res.data.data];
            this.loading=false;
            this.pageIndex++;
          }
        })
        .catch((err)=>{
          console.log("err",err);
        });
      },
      goGoodsDetail(goodsid){
        this.$router.push("/goodsdetail/"+goodsid)
      }  
    }
    
}
</script>

<style scoped>
  .detai-box{
    width: 100%;    
    font-size: 14px;
    column-count: 2;
    column-gap: 5px;   
  }

  .detai-box div{
    width: 100%;   
    text-align: center; 
    break-inside: avoid;
  }

  .detai-box div img{
    width: 90%;
  }

  .title{
    display: -webkit-box ;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align: left;
  }

.price{
  text-align: left;
}

</style>